define(()=>{
    class magnifier {
        constructor() {

            this.init()
        }
        init() {

            this.move()
            this.over()
            this.out()


            this.chang()



        }
        // 鼠标移动大盒子跟随移动
        move() {


            // 鼠标移动大盒子跟随移动
            $(".smallimge").mousemove(function (e) {
                e = e || window.event
                // 拿到鼠标在盒子里面的位置
                let x = e.pageX - $(".smallimge")[0].offsetParent.offsetLeft - $(".move")[0].offsetWidth / 2
                let y = e.pageY - $(".smallimge")[0].offsetParent.offsetTop - $(".move")[0].offsetHeight / 2
                console.log(2)
                //  限定鼠标位置   
                // 水平位置
                if (x <= 0) {
                    x = 0
                } else if (x >= $(".smallimge")[0].offsetWidth - $(".move")[0].offsetWidth) {
                    x = $(".smallimge")[0].offsetWidth - $(".move")[0].offsetWidth

                }

                // 垂直位置
                if (y <= 0) {
                    y = 0
                } else if (y >= $(".smallimge")[0].offsetHeight - $(".move")[0].offsetHeight) {
                    y = $(".smallimge")[0].offsetHeight - $(".move")[0].offsetHeight

                }

                $(".move")[0].style.left = x + "px"
                $(".move")[0].style.top = y + "px"
                // 计算放大比例
                var l = x / ($(".smallimge")[0].offsetWidth - $(".move")[0].offsetWidth);
                var t = y / ($(".smallimge")[0].offsetHeight - $(".move")[0].offsetHeight);

                $(".magnifier img")[0].style.left = -l * ($(".magnifier img")[0].offsetWidth - $(".magnifier")[0].offsetWidth) + 'px';
                $(".magnifier img")[0].style.top = -t * ($(".magnifier img")[0].offsetHeight - $(".magnifier")[0].offsetHeight) + 'px';


            })




        }




        // 当鼠标划过时让遮罩层和大盒子出现
        over() {


            $(".smallimge").mouseover(function () {
                $(".magnifier").show()
                $(".move").show()


            })


        }
        //当鼠标离开时让遮罩层和大盒子消失
        out() {

            $(".smallimge").mouseout(function () {

                $(".magnifier").hide()
                $(".move").hide()

            })




        }


        // 划过下面小图片，上面图片地址随之改变
        chang() {


            $(".left >ul li").mouseover(function () {
                let url = $(".left >ul li img").eq($(this).index()).attr("src")
                //    改变img上的地址
                $(".smallimge>img").attr("src", url)
                $(".magnifier>img").attr("src", url)


            })


        }


    }

    return new magnifier()
    })























//  //当鼠标划过时让遮罩层和大盒子出现
//  $(".smallimge").mouseover ( function(){
//     $(".magnifier").show()
//     $(".move").show()


// }) 
// // //当鼠标离开时让遮罩层和大盒子消失
// $(".smallimge").mouseout(function(){

//     $(".magnifier").hide()
//     $(".move").hide()

// })







// // 鼠标移动大盒子跟随移动
// $(".smallimge").mousemove(function (e) {
//     e=e||window.event
//     // 拿到鼠标在盒子里面的位置
//     let x=e.clientX-$(".smallimge")[0].offsetParent.offsetLeft-$(".move").outerWidth()/2
//     let y=e.clientY-$(".smallimge")[0].offsetParent.offsetTop-$(".move").outerHeight()/2

//     //  限定鼠标位置
//     // 水平位置
// if(x<=0){
//  x=0  
// }else if(x>=$(".smallimge")[0].offsetWidth-$(".move")[0].offsetWidth){
// x=$(".smallimge")[0].offsetWidth-$(".move")[0].offsetWidth

// }

// // 垂直位置
// if(y<=0){
//     y=0  
//    }else if(y>=$(".smallimge")[0].offsetHeight-$(".move")[0].offsetHeight){
//    y=$(".smallimge")[0].offsetHeight-$(".move")[0].offsetHeight

//    }

// $(".move")[0].style.left=x+"px"
// $(".move")[0].style.top=y+"px"
// // 计算放大比例
// var l = x / ($(".smallimge")[0].offsetWidth -$(".move")[0].offsetWidth);
// var  t = y / ($(".smallimge")[0].offsetHeight - $(".move")[0].offsetHeight);

// $(".magnifier img")[0].style.left = -l * ($(".magnifier img")[0].offsetWidth - $(".magnifier")[0].offsetWidth) + 'px';
// $(".magnifier img")[0].style.top = -t * ($(".magnifier img")[0].offsetHeight - $(".magnifier")[0].offsetHeight) + 'px'; 


// })


// // 划过下面小图片，上面图片地址随之改变

// $(".left >ul li").mouseover(function () {
//     let url=$(".left >ul li img").eq($(this).index()).attr("src")
// //    改变img上的地址
//     $(".smallimge>img").attr("src",url)
//     $(".magnifier>img").attr("src",url)


// })